<script lang="ts" setup>
import CustomTabBar from '@/components/custom-tabbar.vue'
import { ref } from 'vue'
// 获取屏幕边界到安全域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
console.log('safeAreaInsets', safeAreaInsets);


const functionData = ref([
  { id: 1, name: '编辑资料', type: 'icon-bianjiziliao', color: '#f87083', url: '/pages-sub/mine-sub/editor-user' },
  { id: 2, name: '校园服务', type: 'icon-xiaoyuanfuwu', color: '#9677fe', url: '/pages-sub/mine-sub/services' },
  { id: 3, name: '我的发布', type: 'icon-wodefabu', color: '#f88240', url: '/pages-sub/mine-sub/user-posting' },
])

const comonlyData = ref([
  { id: 1, name: '账号安全', type: 'icon-zhanghaoanquan1', color: '#fad447', size: "30", url: '/pages-sub/mine-sub/change-password' },
  { id: 2, name: '用户协议', type: 'icon-xieyi', color: '#3de3a6', size: "30", url: '/pages-sub/mine-sub/agreement' },
  { id: 3, name: '关于我们', type: 'icon-guanyuwomen', color: '#f6b13d', size: "28", url: '/pages-sub/mine-sub/regarding-us' }
])

// 跳转用户详情页
const handUserDetails = () => {
  uni.navigateTo({
    url: '/pages-sub/user-details/index',
  })
}

// 跳转到用户粉丝页面
const handUserFans = () => {
  uni.navigateTo({
    url: '/pages-sub/user-details/fans',
  })
}

// 点击功能模块
const onFunction = (url: string) => {
  if (url) {
    uni.navigateTo({ url });
  }
}

// 点击常用功能
const onCommonly = (url: string) => {
  if (url) {
    uni.navigateTo({ url });
  }
}

</script>

<template>
  <view class="mine" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
    <!-- 使用flex布局的容器 -->
    <view class="content-container">
      <!-- 左侧内容区域 -->
      <view class="left-content">
        <!-- 用户简介 -->
        <view class="mine-user" @click="handUserDetails">
          <image class="mine-user-image" src="/static/user/user.jpg" mode="scaleToFill" />
          <view class="mine-user-text">
            <h2 class="mine-user-text-h2">西瓜</h2>
            <text class="mine-user-text-p">大四~视觉传达</text>
          </view>
        </view>

        <!-- 粉丝数据部分 -->
        <view class="mine-stats" @click="handUserFans">
          <view class="mine-stats-label" v-for="item in 2" :key="item" >
            <h2 class="mine-stats-label-h2">73</h2>
            <text class="mine-stats-label-text">粉丝</text>
          </view>
        </view>
      </view>

      <!-- 右侧图片区域 -->
      <image class="right-image" src="/static/cover.png" mode="aspectFill" />
    </view>

    <!-- 标语 -->
    <view class="mine-slogan">
      <h2 class="mine-slogan-h2">本校标语</h2>
      <text class="mine-slogan-text">拥有一颗上进的心，才能取得成功。</text>
    </view>

    <!-- 功能模块 -->
    <view class="mine-module">
      <view class="mine-module-icon" v-for="item in functionData" :key="item.id" @click="onFunction(item.url)">
        <uni-icons custom-prefix="iconfont" :color="item.color" :type="item.type" size="25"></uni-icons>
        <h5 class="mine-module-icon-text">{{ item.name }}</h5>
      </view>
    </view>

    <!-- 常用功能 -->
    <view class="mine-commonly">
      <h1 class="mine-commonly-h1">常用功能</h1>
      <view class="mine-commonly-icon" v-for="item in comonlyData" :key="item.id" @click="onCommonly(item.url)">
        <uni-icons custom-prefix="iconfont" :color="item.color" :type="item.type" :size="item.size"></uni-icons>
        <text class="mine-commonly-icon-text">{{ item.name }}</text>
      </view>

    </view>

    <CustomTabBar />
  </view>
</template>

<style scoped lang="scss">
.mine {
  .content-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .left-content {
    width: 48%; // 留2%的间隙
  }

  .right-image {
    width: 48%; // 留2%的间隙
    height: 300rpx; // 设置一个固定高度，根据需要调整
    border-radius: 16rpx;
    opacity: 0.6;
    margin-right: 2%;
  }

  &-user {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    &-image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100%;
    }

    &-text {
      margin-left: 30rpx;

      &-h2 {
        font-size: 30rpx;
        font-weight: 700;
      }

      &-p {
        font-size: 25rpx;
        color: #848a9d;
      }
    }
  }

  &-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    padding-left: 30rpx;

    &-label {
      margin-right: 80rpx;

      &-h2 {
        font-size: 40rpx;
        font-weight: 700;
      }

      &-text {
        font-size: 25rpx;
        color: #bcbcbc;
      }
    }
  }

  &-slogan {
    padding: 25rpx;
    background-color: #ddecff;
    border-top-left-radius: 30rpx;
    /* 左上圆角 */
    border-top-right-radius: 30rpx;
    /* 右上圆角 */

    &-h2 {
      font-size: 30rpx;
      margin-bottom: 15rpx;
      font-weight: 700;
      color: #5f6980;
    }

    &-text {
      font-size: 35rpx;
      font-weight: 700;
      color: #5c85ff;
    }
  }

  &-module {
    margin-top: 30rpx;
    display: flex;

    &-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 50rpx;


      &-text {
        font-size: 25rpx;
        margin-top: $uni-margin-top;
        font-weight: 700;
      }
    }

  }

  &-commonly {
    &-h1 {
      font-size: 35rpx;
      font-weight: 700;
      line-height: 130rpx;
      color: #3a3a3c;
    }

    &-icon {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      &-text {
        margin-left: 30rpx;
        font-size: 30rpx;
        color: #343435;
      }
    }
  }
}
</style>